<template>
  <div :class="['mdContainer', 'mdContainer_' + index]" style="">
    <div id="videoContainer"></div>
    <canvas id="canvas" ref="canvas"></canvas>
  </div>
</template>
<script>
let jessibuca = null;
import axios from "axios";
export default {
  name: "psuseVideo",
  props: ["index"],
  mounted() {
    this.initJessibuca();
  },
  beforeRouteLeave(to, from, next) {
    if (jessibuca) {
      jessibuca.destroy();
    }
    next();
  },
  methods: {
    async initJessibuca() {
      let numContainer = ".mdContainer_" + this.index + " #videoContainer";
      let $container = document.querySelector(numContainer);
      const showOperateBtns = true; // 是否显示按钮
      const forceNoOffscreen = true; //
      jessibuca = new window.Jessibuca({
        container: $container,
        videoBuffer: 0.2, // 缓存时长
        isResize: false,
        text: "",
        loadingText: "",
        useMSE: false,
        debug: true,
        showBandwidth: showOperateBtns, // 显示网速
        operateBtns: {
          fullscreen: showOperateBtns,
          screenshot: showOperateBtns,
          play: showOperateBtns,
          audio: true,
          record: true,
        },
        forceNoOffscreen: forceNoOffscreen,
        isNotMute: true,
      });


        await axios
          .post("http://172.20.202.85:18080/hik/getStream", {
            cameraIndexCode: "结构化",
            protocol: "rtmp",
          })
          .then((response) => {
            if (response.status == 200) {
              if (!response.data.data) {
                return false;
              } else {
                this.$nextTick(() => {
                  if (response.data.data.url) {
                    jessibuca.play(response.data.data.url);
                  }
                });
              }
            }
          });

    },
  },
};
</script>
<style lang="less" scoped>
.mdContainer {
  overflow: hidden;
  display: block;
  //   height: 65vh;
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

#videoContainer {
  background: #000;
}
</style>
